
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Charts: Define a Chart's Axes and Series</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>

</head>
<body id="yahoo-com" class="false">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Charts: Define a Chart's Axes and Series</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Charts: Define a Chart's Axes and Series</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	This example shows how to explicitly define the axes and series for a <code>Chart</code>.
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="charts-objectstyles_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<html>
<head>
</head>
<body>
<div id="mychart"></div>
<script type="text/javascript">
(function() {
    YUI().use('charts', function (Y) 
    { 
        //dataProvider source
        var myDataValues = [ 
            {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
            {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
            {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
            {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
            {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
            {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
        ];
        
        //Define our axes for the chart.
        var myAxes = {
            financials:{
                keys:["miscellaneous", "revenue", "expenses"],
                position:"right",
                type:"numeric",
                styles:{
                    majorTicks:{
                        display: "none"
                    }
                }
            },
            dateRange:{
                keys:["date"],
                position:"bottom",
                type:"category",
                styles:{
                    majorTicks:{
                        display: "none"
                    },
                    label: {
                        rotation:-45,
                        margin:{top:5}
                    }
                }
            }
        };
       
        //define the series 
        var seriesCollection = [
         {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"miscellaneous",
                xDisplayName:"Date",
                yDisplayName:"Miscellaneous",
                styles: {
                    border: {
                        weight: 1,
                        color: "#58006e"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            },
            {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"expenses",
                yDisplayName:"Expenses",
                styles: {
                    marker:{
                        fill: {
                            color: "#e0ddd0" 
                        },
                        border: {
                            weight:"1",
                            color: "#cbc8ba"
                        },
                        over: {
                            fill: {
                                alpha: 0.7
                            }
                        }
                    }
                }
            },
            {
                type:"combo",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"revenue",
                xDisplayName:"Date",
                yDisplayName:"Deductions",
                    line: {
                        color: "#ff7200"
                    },
                marker: {
                    fill: {
                        color: "#ff9f3b"
                    },
                    border: {
                        color: "#ff7200",
                        weight: 1
                    },
                    over: {
                        width: 12,
                        height: 12
                    },
                    width:9,
                    height:9
                }
            }
        ];

        //instantiate the chart
        var myChart = new Y.Chart({
                            dataProvider:myDataValues, 
                            axes:myAxes, 
                            seriesCollection:seriesCollection, 
                            horizontalGridlines: true,
                            verticalGridlines: true,
                            render:"#mychart"
                        });
    });
})();
</script>
</body>
</html>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>Defining the axes and series for a <code>Chart</code> instance</h3>

<p>As we have seen from previous examples, the <code>Chart</code> class allows you to create and customize multiple chart types with very little code. Sometimes you'll want more control 
over the <code>Chart</code>. Suppose you want to place your value axis on the right or your need different series types in the same chart. Charts allows you to explicitly define your series and axes objects. You can either declare
an axis or series directly or define them with an object literal and allow the <code>Chart</code> instance to build them for you. In this example, we are going to define our axes and series with
object literals. This will allow us to place our value axis on the right and build a chart with columns and lines.</p>

<div id="syntax-c27330b4f347a185c3bc2d3ad7ee33dd" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'charts'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> </div></li><li class="li1"><div class="de1"><span class="br0">&#123;</span> </div></li><li class="li1"><div class="de1">    <span class="co1">//dataProvider source</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> myDataValues <span class="sy0">=</span> <span class="br0">&#91;</span> </div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;1/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">2000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">3700</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">2200</span><span class="br0">&#125;</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;2/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">5000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">9100</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">100</span><span class="br0">&#125;</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;3/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">4000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">1900</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">1500</span><span class="br0">&#125;</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;4/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">3000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">3900</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">2800</span><span class="br0">&#125;</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;5/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">500</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">7000</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">2650</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;6/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">3000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">4700</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">1200</span><span class="br0">&#125;</span> </div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Define our axes for the chart.</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> myAxes <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        financials<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            keys<span class="sy0">:</span><span class="br0">&#91;</span><span class="st0">&quot;miscellaneous&quot;</span><span class="sy0">,</span> <span class="st0">&quot;revenue&quot;</span><span class="sy0">,</span> <span class="st0">&quot;expenses&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            position<span class="sy0">:</span><span class="st0">&quot;right&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            type<span class="sy0">:</span><span class="st0">&quot;numeric&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            styles<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                majorTicks<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    display<span class="sy0">:</span> <span class="st0">&quot;none&quot;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        dateRange<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            keys<span class="sy0">:</span><span class="br0">&#91;</span><span class="st0">&quot;date&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            position<span class="sy0">:</span><span class="st0">&quot;bottom&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            type<span class="sy0">:</span><span class="st0">&quot;category&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            styles<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                majorTicks<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    display<span class="sy0">:</span> <span class="st0">&quot;none&quot;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                label<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    rotation<span class="sy0">:-</span><span class="nu0">45</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                    margin<span class="sy0">:</span><span class="br0">&#123;</span>top<span class="sy0">:</span><span class="nu0">5</span><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//define the series </span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> seriesCollection <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">     <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            type<span class="sy0">:</span><span class="st0">&quot;column&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            xAxis<span class="sy0">:</span><span class="st0">&quot;dateRange&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yAxis<span class="sy0">:</span><span class="st0">&quot;financials&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xKey<span class="sy0">:</span><span class="st0">&quot;date&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yKey<span class="sy0">:</span><span class="st0">&quot;miscellaneous&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xDisplayName<span class="sy0">:</span><span class="st0">&quot;Date&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            yDisplayName<span class="sy0">:</span><span class="st0">&quot;Miscellaneous&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            styles<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                border<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    weight<span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    color<span class="sy0">:</span> <span class="st0">&quot;#58006e&quot;</span></div></li><li class="li2"><div class="de2">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                over<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    fill<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        alpha<span class="sy0">:</span> <span class="nu0">0.7</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            type<span class="sy0">:</span><span class="st0">&quot;column&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            xAxis<span class="sy0">:</span><span class="st0">&quot;dateRange&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yAxis<span class="sy0">:</span><span class="st0">&quot;financials&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xKey<span class="sy0">:</span><span class="st0">&quot;date&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yKey<span class="sy0">:</span><span class="st0">&quot;expenses&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yDisplayName<span class="sy0">:</span><span class="st0">&quot;Expenses&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            styles<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                marker<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    fill<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        color<span class="sy0">:</span> <span class="st0">&quot;#e0ddd0&quot;</span> </div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                    border<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        weight<span class="sy0">:</span><span class="st0">&quot;1&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        color<span class="sy0">:</span> <span class="st0">&quot;#cbc8ba&quot;</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    over<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                        fill<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                            alpha<span class="sy0">:</span> <span class="nu0">0.7</span></div></li><li class="li1"><div class="de1">                        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            type<span class="sy0">:</span><span class="st0">&quot;combo&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xAxis<span class="sy0">:</span><span class="st0">&quot;dateRange&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            yAxis<span class="sy0">:</span><span class="st0">&quot;financials&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xKey<span class="sy0">:</span><span class="st0">&quot;date&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yKey<span class="sy0">:</span><span class="st0">&quot;revenue&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            xDisplayName<span class="sy0">:</span><span class="st0">&quot;Date&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            yDisplayName<span class="sy0">:</span><span class="st0">&quot;Deductions&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                line<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    color<span class="sy0">:</span> <span class="st0">&quot;#ff7200&quot;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            marker<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                fill<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                    color<span class="sy0">:</span> <span class="st0">&quot;#ff9f3b&quot;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                border<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    color<span class="sy0">:</span> <span class="st0">&quot;#ff7200&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    weight<span class="sy0">:</span> <span class="nu0">1</span></div></li><li class="li2"><div class="de2">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                over<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    width<span class="sy0">:</span> <span class="nu0">12</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                    height<span class="sy0">:</span> <span class="nu0">12</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">                width<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                height<span class="sy0">:</span><span class="nu0">9</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//instantiate the chart</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> myChart <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Chart</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                        dataProvider<span class="sy0">:</span>myDataValues<span class="sy0">,</span> </div></li><li class="li1"><div class="de1">                        axes<span class="sy0">:</span>myAxes<span class="sy0">,</span> </div></li><li class="li2"><div class="de2">                        seriesCollection<span class="sy0">:</span>seriesCollection<span class="sy0">,</span> </div></li><li class="li1"><div class="de1">                        horizontalGridlines<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        verticalGridlines<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">                        render<span class="sy0">:</span><span class="st0">&quot;#mychart&quot;</span></div></li><li class="li1"><div class="de1">                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'charts'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> 
<span class="br0">&#123;</span> 
    <span class="co1">//dataProvider source</span>
    <span class="kw2">var</span> myDataValues <span class="sy0">=</span> <span class="br0">&#91;</span> 
        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;1/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">2000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">3700</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">2200</span><span class="br0">&#125;</span><span class="sy0">,</span> 
        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;2/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">5000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">9100</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">100</span><span class="br0">&#125;</span><span class="sy0">,</span> 
        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;3/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">4000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">1900</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">1500</span><span class="br0">&#125;</span><span class="sy0">,</span> 
        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;4/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">3000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">3900</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">2800</span><span class="br0">&#125;</span><span class="sy0">,</span> 
        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;5/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">500</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">7000</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">2650</span><span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>date<span class="sy0">:</span><span class="st0">&quot;6/1/2010&quot;</span><span class="sy0">,</span> miscellaneous<span class="sy0">:</span><span class="nu0">3000</span><span class="sy0">,</span> expenses<span class="sy0">:</span><span class="nu0">4700</span><span class="sy0">,</span> revenue<span class="sy0">:</span><span class="nu0">1200</span><span class="br0">&#125;</span> 
    <span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Define our axes for the chart.</span>
    <span class="kw2">var</span> myAxes <span class="sy0">=</span> <span class="br0">&#123;</span>
        financials<span class="sy0">:</span><span class="br0">&#123;</span>
            keys<span class="sy0">:</span><span class="br0">&#91;</span><span class="st0">&quot;miscellaneous&quot;</span><span class="sy0">,</span> <span class="st0">&quot;revenue&quot;</span><span class="sy0">,</span> <span class="st0">&quot;expenses&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span>
            position<span class="sy0">:</span><span class="st0">&quot;right&quot;</span><span class="sy0">,</span>
            type<span class="sy0">:</span><span class="st0">&quot;numeric&quot;</span><span class="sy0">,</span>
            styles<span class="sy0">:</span><span class="br0">&#123;</span>
                majorTicks<span class="sy0">:</span><span class="br0">&#123;</span>
                    display<span class="sy0">:</span> <span class="st0">&quot;none&quot;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        dateRange<span class="sy0">:</span><span class="br0">&#123;</span>
            keys<span class="sy0">:</span><span class="br0">&#91;</span><span class="st0">&quot;date&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span>
            position<span class="sy0">:</span><span class="st0">&quot;bottom&quot;</span><span class="sy0">,</span>
            type<span class="sy0">:</span><span class="st0">&quot;category&quot;</span><span class="sy0">,</span>
            styles<span class="sy0">:</span><span class="br0">&#123;</span>
                majorTicks<span class="sy0">:</span><span class="br0">&#123;</span>
                    display<span class="sy0">:</span> <span class="st0">&quot;none&quot;</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
                label<span class="sy0">:</span> <span class="br0">&#123;</span>
                    rotation<span class="sy0">:-</span><span class="nu0">45</span><span class="sy0">,</span>
                    margin<span class="sy0">:</span><span class="br0">&#123;</span>top<span class="sy0">:</span><span class="nu0">5</span><span class="br0">&#125;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//define the series </span>
    <span class="kw2">var</span> seriesCollection <span class="sy0">=</span> <span class="br0">&#91;</span>
     <span class="br0">&#123;</span>
            type<span class="sy0">:</span><span class="st0">&quot;column&quot;</span><span class="sy0">,</span>
            xAxis<span class="sy0">:</span><span class="st0">&quot;dateRange&quot;</span><span class="sy0">,</span>
            yAxis<span class="sy0">:</span><span class="st0">&quot;financials&quot;</span><span class="sy0">,</span>
            xKey<span class="sy0">:</span><span class="st0">&quot;date&quot;</span><span class="sy0">,</span>
            yKey<span class="sy0">:</span><span class="st0">&quot;miscellaneous&quot;</span><span class="sy0">,</span>
            xDisplayName<span class="sy0">:</span><span class="st0">&quot;Date&quot;</span><span class="sy0">,</span>
            yDisplayName<span class="sy0">:</span><span class="st0">&quot;Miscellaneous&quot;</span><span class="sy0">,</span>
            styles<span class="sy0">:</span> <span class="br0">&#123;</span>
                border<span class="sy0">:</span> <span class="br0">&#123;</span>
                    weight<span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">,</span>
                    color<span class="sy0">:</span> <span class="st0">&quot;#58006e&quot;</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
                over<span class="sy0">:</span> <span class="br0">&#123;</span>
                    fill<span class="sy0">:</span> <span class="br0">&#123;</span>
                        alpha<span class="sy0">:</span> <span class="nu0">0.7</span>
                    <span class="br0">&#125;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>
            type<span class="sy0">:</span><span class="st0">&quot;column&quot;</span><span class="sy0">,</span>
            xAxis<span class="sy0">:</span><span class="st0">&quot;dateRange&quot;</span><span class="sy0">,</span>
            yAxis<span class="sy0">:</span><span class="st0">&quot;financials&quot;</span><span class="sy0">,</span>
            xKey<span class="sy0">:</span><span class="st0">&quot;date&quot;</span><span class="sy0">,</span>
            yKey<span class="sy0">:</span><span class="st0">&quot;expenses&quot;</span><span class="sy0">,</span>
            yDisplayName<span class="sy0">:</span><span class="st0">&quot;Expenses&quot;</span><span class="sy0">,</span>
            styles<span class="sy0">:</span> <span class="br0">&#123;</span>
                marker<span class="sy0">:</span><span class="br0">&#123;</span>
                    fill<span class="sy0">:</span> <span class="br0">&#123;</span>
                        color<span class="sy0">:</span> <span class="st0">&quot;#e0ddd0&quot;</span> 
                    <span class="br0">&#125;</span><span class="sy0">,</span>
                    border<span class="sy0">:</span> <span class="br0">&#123;</span>
                        weight<span class="sy0">:</span><span class="st0">&quot;1&quot;</span><span class="sy0">,</span>
                        color<span class="sy0">:</span> <span class="st0">&quot;#cbc8ba&quot;</span>
                    <span class="br0">&#125;</span><span class="sy0">,</span>
                    over<span class="sy0">:</span> <span class="br0">&#123;</span>
                        fill<span class="sy0">:</span> <span class="br0">&#123;</span>
                            alpha<span class="sy0">:</span> <span class="nu0">0.7</span>
                        <span class="br0">&#125;</span>
                    <span class="br0">&#125;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        <span class="br0">&#123;</span>
            type<span class="sy0">:</span><span class="st0">&quot;combo&quot;</span><span class="sy0">,</span>
            xAxis<span class="sy0">:</span><span class="st0">&quot;dateRange&quot;</span><span class="sy0">,</span>
            yAxis<span class="sy0">:</span><span class="st0">&quot;financials&quot;</span><span class="sy0">,</span>
            xKey<span class="sy0">:</span><span class="st0">&quot;date&quot;</span><span class="sy0">,</span>
            yKey<span class="sy0">:</span><span class="st0">&quot;revenue&quot;</span><span class="sy0">,</span>
            xDisplayName<span class="sy0">:</span><span class="st0">&quot;Date&quot;</span><span class="sy0">,</span>
            yDisplayName<span class="sy0">:</span><span class="st0">&quot;Deductions&quot;</span><span class="sy0">,</span>
                line<span class="sy0">:</span> <span class="br0">&#123;</span>
                    color<span class="sy0">:</span> <span class="st0">&quot;#ff7200&quot;</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
            marker<span class="sy0">:</span> <span class="br0">&#123;</span>
                fill<span class="sy0">:</span> <span class="br0">&#123;</span>
                    color<span class="sy0">:</span> <span class="st0">&quot;#ff9f3b&quot;</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
                border<span class="sy0">:</span> <span class="br0">&#123;</span>
                    color<span class="sy0">:</span> <span class="st0">&quot;#ff7200&quot;</span><span class="sy0">,</span>
                    weight<span class="sy0">:</span> <span class="nu0">1</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
                over<span class="sy0">:</span> <span class="br0">&#123;</span>
                    width<span class="sy0">:</span> <span class="nu0">12</span><span class="sy0">,</span>
                    height<span class="sy0">:</span> <span class="nu0">12</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
                width<span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span>
                height<span class="sy0">:</span><span class="nu0">9</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//instantiate the chart</span>
    <span class="kw2">var</span> myChart <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Chart</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
                        dataProvider<span class="sy0">:</span>myDataValues<span class="sy0">,</span> 
                        axes<span class="sy0">:</span>myAxes<span class="sy0">,</span> 
                        seriesCollection<span class="sy0">:</span>seriesCollection<span class="sy0">,</span> 
                        horizontalGridlines<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
                        verticalGridlines<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
                        render<span class="sy0">:</span><span class="st0">&quot;#mychart&quot;</span>
                    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-c27330b4f347a185c3bc2d3ad7ee33dd-plain">YUI().use('charts', function (Y) 
{ 
    //dataProvider source
    var myDataValues = [ 
        {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
        {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
        {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
        {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
        {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
        {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
    ];

    //Define our axes for the chart.
    var myAxes = {
        financials:{
            keys:["miscellaneous", "revenue", "expenses"],
            position:"right",
            type:"numeric",
            styles:{
                majorTicks:{
                    display: "none"
                }
            }
        },
        dateRange:{
            keys:["date"],
            position:"bottom",
            type:"category",
            styles:{
                majorTicks:{
                    display: "none"
                },
                label: {
                    rotation:-45,
                    margin:{top:5}
                }
            }
        }
    };

    //define the series 
    var seriesCollection = [
     {
            type:"column",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"miscellaneous",
            xDisplayName:"Date",
            yDisplayName:"Miscellaneous",
            styles: {
                border: {
                    weight: 1,
                    color: "#58006e"
                },
                over: {
                    fill: {
                        alpha: 0.7
                    }
                }
            }
        },
        {
            type:"column",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"expenses",
            yDisplayName:"Expenses",
            styles: {
                marker:{
                    fill: {
                        color: "#e0ddd0" 
                    },
                    border: {
                        weight:"1",
                        color: "#cbc8ba"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            }
        },
        {
            type:"combo",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"revenue",
            xDisplayName:"Date",
            yDisplayName:"Deductions",
                line: {
                    color: "#ff7200"
                },
            marker: {
                fill: {
                    color: "#ff9f3b"
                },
                border: {
                    color: "#ff7200",
                    weight: 1
                },
                over: {
                    width: 12,
                    height: 12
                },
                width:9,
                height:9
            }
        }
    ];
    
    //instantiate the chart
    var myChart = new Y.Chart({
                        dataProvider:myDataValues, 
                        axes:myAxes, 
                        seriesCollection:seriesCollection, 
                        horizontalGridlines: true,
                        verticalGridlines: true,
                        render:"#mychart"
                    });
});</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Charts Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../charts/charts-simple.html'>Basic Charts Implementation</a></li><li><a href='../charts/charts-multiseries.html'>Chart with Multiple Series</a></li><li><a href='../charts/charts-column.html'>Specify Chart Type</a></li><li><a href='../charts/charts-stackedcolumn.html'>Create Stacked Chart</a></li><li><a href='../charts/charts-timeaxis.html'>Create a Chart with a Time Axis</a></li><li><a href='../charts/charts-gridlines.html'>Add Gridlines to a Chart</a></li><li><a href='../charts/charts-stackedarea.html'>Create Stacked Area Chart with Planar Based Events</a></li><li><a href='../charts/charts-globalstyles.html'>Customize a Chart</a></li><li><a href='../charts/charts-customizedtooltip.html'>Customize a Chart's Tooltip</a></li><li class='selected'><a href='../charts/charts-objectstyles.html'>Define a Chart's Axes and Series</a></li><li><a href='../charts/charts-pie.html'>Pie Chart</a></li><li><a href='../charts/charts-dualaxes.html'>Dual Axes Chart</a></li><li><a href='../charts/charts-axisupdate.html'>Update Chart Axis</a></li><li><a href='../charts/charts-seriesupdate.html'>Update Chart Series</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Charts Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/charts/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_charts.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
